{extend name="extra@index/base" /}
{block name="title"}SpeedUp外卖{/block}

{block name="css"}


{/block}


{block name='page'}
<!-- 页面开始 -->


<style>/**页面css写在这里*/
#youhui {
    font-size: 3px;
    display: block;
}

.item-subtitle1, .item-subtitle2 {
    font-size: 5px;
}

.bar-header-secondary {
    top: 0;
}

.bar .searchbar {
    padding: .4rem .5rem .4rem 4rem;
    background: #0099FF;
}

.bar .searchbar .searchbar-cancel {
    color: white;
}

ul {
    list-style: none;
}

#location {
    color: white;
    position: absolute;
    line-height: 2.2rem;
    display: inline-block;
    width: 4rem;
    text-align: center;
    margin-left: -.5rem;
}

.item-subtitle3 {
    float: right;
    font-size: 1px;
}

.down-open .icon-down {
    transform: rotate(180deg);
}

.card-footer {
    height: 10px;
}

.icon-down {
    transition: all .3s;
}

.tab-label {
    top: -4px !important;
}

.item-subtitle1 {
    font-size: 0.6rem;
}

.item3 {
    font-size: 0.6rem;
    float: right;
}
</style>


<div class="bar bar-header-secondary">
    <span id="location">保定<span class="icon icon-down" style="font-size: 11px;margin-left: 5px;"></span></span>
    <div class="searchbar">
        <a class="searchbar-cancel">取消</a>
        <div class="search-input">
            <label class="icon icon-search" for="search"></label>
            <input type="search" id='search' placeholder='输入关键字'/>
        </div>
    </div>
    <div class="card-content">
        <div class="list-block media-list" id="vue">
            <ul>
                <a v-for="a in shops" :href="['/index/index/shop?id='+a.Id]">
                    <li class="item-content">
                        <div class="item-media">
                            <img :src="[a.Logo?a.Logo:'/static/img/shop.png']" width="44">
                        </div>
                        <div class="item-inner">
                            <div class="item-title-row">
                                <div class="item-title">{{a.ShopName}}</div>
                            </div>
                            <div class="item-subtitle1">起送价:{{a.UpPrice}}元<span>&nbsp;配送价:{{a.ShipPrice}}元</span>
                                <!--<div class="item3">1千米|10分钟</div>-->
                            </div>
                        </div>
                    </li>
                </a>
            </ul>
        </div>
    </div>
</div>


<script>
    var vm = new Vue({
        el: '#vue',
        data: function () {
            return {
                shops: []
            }
        },
        mounted: function () {
            $.showPreloader()
            $.get('/api/Shops/getshop', function (ret) {
                $.hidePreloader();
                vm.shops = ret;
            });
        }
    })
    var data = null;
    $("#location").cityPicker({
        toolbarTemplate: '<header class="bar bar-nav">\
  <button class="button button-link pull-right close-picker" onclick="setLocation(data)">确定</button>\
  <h1 class="title">请选择地区</h1>\
  </header>',
        onClose: function () {
            $(".bar").removeClass('down-open');
            $("#location").removeClass('close-picker');
        },
        onOpen: function (item) {
            data = item;
            $(".bar").addClass('down-open');
            setTimeout(function () {
                $("#location").addClass('close-picker')
            }, 300);
        }
    });
    function setLocation(obj) {
        $('#location').html(obj.value[1]);
    }
</script>

<!-- 页面结束 -->
{/block}


{block name="base"}
<div class="panel-overlay"></div>
<div class="panel panel-left panel-reveal theme-dark" id='panel-left'>
    <!-- 左边侧栏开始 -->

    <!-- 左边侧栏结束 -->
</div>
{/block}


{block name="js"}
{/block}